<template>
	<view class="r_detail">
		<view class="head" @click="navToExpressDetail" v-if="order_item.order_pay_status=='SUCCESS'">
			<view class="head_l">
					<view class="head_l_01">{{wuliu.list[wuliu.list.length-1].datetime}}</view>
					<uni-icons type="icon-fanhui2" class="icon-fanhui2" color="#FFF"></uni-icons>
			</view>
			<view class="head_l_02">{{ wuliu.list[wuliu.list.length-1].remark}}</view>
		</view>
		<view class="mess"  v-if="order_item.order_pay_status=='SUCCESS'">
			<view class="mess_02"  >
				<view class="mess_02_1">
					<view class="mess_02_l">快递公司:</view>
					<view class="mess_02_r">{{ship.name}}</view>
				</view>
				<view class="mess_02_1">
					<view class="mess_02_l">快递单号:</view>
					<input placeholder="请输入单号" class="mess_02_r" type="text" :disabled="disabled" style="border-bottom: 1px #ccc solid;"
					 v-model="ship.express_serial" />
				</view>
			</view>
		</view>
		<view class="address">
			<view class="address_l"><img src="../../static/icons/location.png" mode="scaleToFill"></img></view>
			<view class="address_r">
				<view class="address_r_01">
					<view>收货人：{{order_item.ship.username !== undefined?order_item.ship.username: ''}}</view>
					<view>{{order_item.ship.phone!=undefined ? order_item.ship.phone: ''}}</view>
				</view>
				<view class="address_r_02">收货地址：{{order_item.ship.address}}</view>
			</view>
		</view>
		<view class="tenant" @click="navToTenant">
			<text class="tenant_title">{{tenant.shop_name}}</text>
			<uni-icons type="icon-fanhui2" color="#606266"></uni-icons>
		</view>
		<view class='tag-e'>
			<view class="goods " v-for="(item,index) of order_item.items"  @click="navToProduct(item)" :key="index">
				<view><img :src="item.item_image"></img></view>
				<view class='goods_02'>
					<view class='goods_title'>{{item.item_title}}</view>
					<view class="goods_des"><text v-for="(value,index) in item.item_skus " :key="index">{{value}}</text> </view>
					<view class='good_p'>
						<view class="good_price">¥{{item.item_price}}</view>
						<view class='i'>x {{item.item_num}}</view>
					</view>
				</view>
			</view>
		</view>
		<view class="total">总计：¥ {{order_item.order_total}}</view>
		<view class="mess">
			<view class="mess_01">订单信息</view>
			<view class="mess_02">
				<view class="mess_02_1">
					<view class="mess_02_l">订单编号:</view>
					<view class="mess_02_r">{{order_item.order_serial}}</view>
				</view>
				<view class="mess_02_1" v-if="order_item.order_pay_status === 'SUCCESS'">
					<view class="mess_02_l">支付单号:</view>
					<view class="mess_02_r">{{order_item.pay_transaction_id}}</view>
				</view>
				<view class="mess_02_1" v-if="order_item.order_pay_status === 'SUCCESS'">
					<view class="mess_02_l">订单状态:</view>
					<view class="mess_02_r"   v-for="(item, index) in navList"  v-if="order_item.order_ship_status === item.state"
						 :key="index">
						<text class="state" style="color:#ff0000" >
							{{item.text}}
						</text>
					</view>
					
				</view>
				<view class="mess_02_1" v-else>
					<view class="mess_02_l">订单状态:</view>
					<view class="mess_02_r"  >
						<text class="state" style="color:#ff0000" >
							待付款
						</text>
					</view>
					
				</view>
			</view>
		</view>
		<view class="foot" v-if=" order_item.order_ship_status === 'WAIT_SHIP'">
			<button class="cu-btn round bg-red" @click="postship">立即发货</button>
		</view>
		<view>
			<lb-picker ref="picker" mode="selector" :list="list" @confirm="handleConfirm"></lb-picker>
		</view>

	</view>
</template>

<script>
	import uniIcons from '../../ed-icons/ed-icons.vue'
	import LbPicker from '@/components/lb-picker'

	import {
		getData
	} from '@/api/publicapi.js'
	export default {
		components: {
			LbPicker,
			uniIcons
		},
		data() {
			return {
				order_serial: '',
				order_item: {
					ship: {
						address:''
					},
					items:[{
						item_price:'',
						item_num:''
					}]
					,
					order_total:'',
					order_pay_status:'',
					order_ship_status:'',
					order_status:''

				},
				wuliu: {
					list: [{
						datetime: '',
						remark: ''
					}]
				},
				ship: {
					name: '点击选择快递',
					express_serial: '',
					express: ''
				},
				list: [

				],
				disabled: true,
				
				navList: [
					// {
					// 	state: '',
					// 	text: '全部',
					// 	loadingType: 'more',
					
					// },
					// {
					// 	state: 'NODO', 
					// 	text: '待付款',
					// 	loadingType: 'more',
					
					// },
					{
						state: 'CANCEL',
						text: '待发货',
						loadingType: 'more',
					
					},
					{
						state: 'SHIPING',
						text: '待收货',
						loadingType: 'more',
					
					}

				],
				tenant: {},
				drop_Down: true
			}

		},
		onLoad(e) {
			console.log(e)
			uni.showLoading({
				title: "记载中"
			})
			setTimeout(function() {
				uni.hideLoading();
			}, 1500);
			this.order_serial = e.order_serial
			// this.getOrderDetail(this.order_serial)
			this._load(this.order_serial)
			this.getexpresslist()
			this.getTenant()
			

		},
		onShow(e) {
			console.log('onShow', e)
		},
		onPullDownRefresh() {
			this.wuliu.list.length--
			// console.log('this.wuliu.list.length', this.wuliu.list.length)
			// wuliu.list[wuliu.list.length-1].datetime
		},
		methods: {
			_load(serial) {
				getData(`front/order/getone?order_serial=${serial}`).then(res => {
					console.log('_LOAD',res.data)
					if (res !== false) {
						this.order_item = res.data
						if (res.data.order_ship_status !== 'NODO' && res.data.order_ship_status !== 'WAIT_SHIP') {
							this.wuliu = res.data.shipwuliu
							this.ship.name = res.data.shipwuliu.company
							this.ship.express_serial = res.data.shipwuliu.no
							this.ship.express = res.data.shipwuliu.com

						}

					}
				})
			},

			navToTenant() {
				let id = this.order_item.tenant_id
				uni.navigateTo({
					url: `/pages/myshop/myshop?id=${id}`
				})
			},
			getTenant() {
				getData(`front/order/getone?order_serial=${this.order_serial}`).then(res => {
					this.tenant = res.data.tenant
					// console.log('this.tenant',res.data)

				})
			},

			// handleTap() {
			// 	this.$refs['picker'].show()
			// },
			handleConfirm(item) {
				this.disabled = false
				this.ship.name = item.item.label
				this.ship.express = item.item.value
			},
			// 获取物流公司
			getexpresslist() {
				// let that = this
				// let serial=this.order_serial
				getData(`front/order/getone?order_serial=${this.order_serial}`).then(res => {
					if (res !== false) {
						for (var i = 0; i < res.data.length; i++) {
							if (res.data[i].is_use == 'Y') {
								let data = {
									label: res.data[i].express_name,
									value: res.data[i].express_code
								}
								this.list.push(data)
							}

						}

					}
				})
			},
			navToExpressDetail() {
				let order_serial=this.order_serial
				uni.navigateTo({
					url:`/pages/express/express?data=${order_serial}`
				})
			},
			navToProduct(item){
				let id=item.item_id
      			uni.navigateTo({
					url: `/pages/product/product?id=${id}`
				})
			}
			// express:快递公司 例如：sf（顺丰）

			//      * express_serial:快递单号 serial：订单号
			//      * ship_status:订单状态（SHIPING：已发货、RETURNED：已退货）
			// postship() {
			// 	let that = this
			// 	let data = {
			// 		ship_status: 'SHIPING',
			// 		express_serial: this.ship.express_serial,
			// 		express: this.ship.express,
			// 		serial: this.order_serial
			// 	}
			// 	http.post('admin/ADManagement/ordership', data).then(res => {
			// 		if (res !== false) {

			// 			this.$api.msg(res.message)
			// 		}
			// 	}).catch(err => {
			// 		this.$api.msg('登录失效')
			// 	})
			// },

		}

	}
</script>

<style lang="scss">
	.r_detail {
		background-color: #F5F5F5;
		height: 100vh;

		.head {
			background-color: #F85043;
			padding: 20upx 0upx 20upx 40upx ;
			border-bottom: 1px solid $border-color-dark;
			.head_l {
				color: #FDF1F0;
				display: flex;
				justify-content: space-between;
				align-items: center;
				
				.head_l_01 {
					color: #FFF;
					font-size: $font-base;
				}
			}
			.head_l_02 {
				color: #FFF;
				font-size: $font-base;
				padding-right: 20upx;
			}

			.head_r img {
				height: 100px;
				width: 120px;
			}
		}

		.address {
			display: flex;
			padding: 20px 15px;
			background-color: #fff;
			margin-bottom: 10px;

			.address_l {
				padding-right: 20px;
				display: flex;
				flex-direction: column;
				justify-content: center;

				img {
					width: 20px;
					height: 20px;
				}
			}

			.address_r {
				flex-grow: 1;
				font-size: $font-base + 2upx;
				color: $font-color-dark;

				.address_r_01 {
					display: flex;
					justify-content: space-between;
					// font-size: 15px;
					// font-weight: 600;
					padding-bottom: 8px;

				}

				.address_r_02 {
					line-height: 20px;
				}
			}
		}

		.tag-e {
			background-color: #fff;
			margin-bottom: 10px;

			.goods {
				display: flex;
				font-size: 14px;
				width: 100%;
				background-color: #ffffff;
				padding: 10px;
				box-sizing: border-box;
				border-bottom: 1px solid #EEF0EF;

				img {
					width: 160rpx;
					height: 160rpx;
				}

				.goods_02 {
					box-sizing: border-box;
					display: flex;
					flex-direction: column;
					height: 160rpx;
					flex-grow: 1;
					justify-content: space-between;
					padding-top: 10rpx;
					padding-left: 25px;
				}

				.goods_title {
					max-height: 40px;
					overflow: hidden;
					line-height: 20px;
					// font-weight: 600;
					font-size: $font-base;
					color: $font-color-dark;
				}

				.goods_des {
					color: #979797;
				}

				.good_p {
					display: flex;
					justify-content: space-between;

					.good_price {
						color: #F04E42;
						font-weight: 600;
					}
				}

			}
		}

		.total {
			background-color: #fff;
			padding: 12px 15px;
			text-align: right;
			margin-bottom: 10px;
			font-size: 15px;
		}

		.mess {
			background-color: #fff;
			padding: 10px;
			margin-bottom: 10px;
			font-size: $font-base;

			.mess_01 {
				border-left: 2px solid #FD5153;
				padding-left: 10px;
				margin-bottom: 10px;
				font-size: $font-base;
				font-weight: 600;
			}

			.mess_02 {
				border-top: 1px solid #F8F8F8;
				padding: 10px;

				.mess_02_1 {
					display: flex;
					line-height: 25px;

					.mess_02_l {
						width: 100px;
					}
				}
			}
		}

		.foot {
			position: fixed;
			bottom: 0px;
			left: 0px;
			z-index: 99;
			border-top: 1px solid #E4E4E4;
			width: 100%;
			background-color: #fff;
			justify-content: flex-end;
			padding: 10px 15px;
			display: flex;
		}
		.tenant {
			display: flex;
			justify-content: space-between;
			border-bottom: 1px solid $border-color-dark;
			padding: 10upx 0upx;
			background-color: #FFFFFF;
			.tenant_title {
				font-size: $font-base;
				padding-left: 20upx;
				color: $base-color;
			}
		
		}
	}
</style>
